<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h4 style="color:red">过滤器的this</h4>
        <p>过滤器回调方法中无法通过 this 关键字获取vue实例对象</p>
        <p>{{ "局部过滤器" | testThis }}</p>
        <p>{{ "全局过滤器" | globaThis }}</p>
        <h4 style="color:red">当全局过滤和局部过滤重名时：局部过滤具有更高的优先级</h4>
        <p>{{ 22 | funA }}</p>
        <h4 style="color:red">全局过滤定义一定要早于实例的创建</h4>
        <h4 style="color:red">Vue2.2.0^ 版本中可以把过滤器应用于v-bind 指令</h4>
        <p v-bind:id=" 'v-bind' | testThis ">v-bind调用过滤器</p>
        <h4 style="color:red">vue的过滤器可以链式调用</h4>
        <p>num:{{ num }}</p>
        <p>num:{{ num | filterA }}</p>
        <p>num:{{ num | filterA | filterB(2) }}</p>
    </div>
</body>
<script>

    Vue.filter("globaThis",function(value){
        console.log("全局过滤器:",this);
        return value;
    });
    Vue.filter("funA",function(){
        return "全局过滤器funA";
    })

    new Vue({
        el:"#app",
        data:{
            num:123456.12345456
        },
        filters:{
            testThis(value){
                console.log("局部过滤器:",this);
                return value;
            },
            funA:function(){
                return "局部过滤器funA";
            },
            filterA(num){
                return Math.ceil(num)
            },
            filterB(num,c=2){
                return num.toFixed(c);
            }
        }
    })
</script>
</html>